<template>
	<view class="index-search-input">
		<image src="../../static/fruit/search.png" mode="aspectFit" class="index-search-image"></image>
		<input type="text" placeholder="请输入关键字" v-model="data.searchInput">
		<image v-if="data.searchInput!=''" @tap="emptyInput" src="../../static/index/empty.png" mode="aspectFit" class="index-empty-image"></image>
		<button @tap="searchThings">搜索</button>
	</view>
	<view class="index-search-result-container">
		<view class="index-search-function-result-container" v-if="data.functionResult.length!=0">
			<view class="index-search-function-result-title">
				功能区
			</view>
			<view class="index-search-function-result-item" 
				v-for="(item,index) in data.functionResult"
				:key="index"
				@tap="goPage(index)">
				<image :src="item.picUrl" mode="aspectFit"></image>
				<view class="index-search-function-result-text">{{item.name}}</view>
			</view>
		</view>
		<view class="index-search-notice-result-container" v-if="data.notice.total!=0">
			<view class="index-search-notice-result-title">
				公告栏
			</view>
			<view class="index-search-notice-result-item" v-for="(item,index) in data.notice.noticeResult"
				:key="index">
				<footItem :noticeInfo="item"></footItem>
			</view>
			<button class="index-search-notice-btn" v-if="!data.notice.isAll" @tap="getMore">点击加载更多</button>
			<view class="index-search-notice-bottom" v-if="data.notice.isAll">
				已经到底啦~
			</view>
		</view>
	</view>
</template>

<script>
	import {onMounted, reactive} from 'vue'
	import global from '../../config/global.js'
	import footItem from '../../components/index/foot-item.vue'
	import {onLoad} from '@dcloudio/uni-app'
	export default {
		name:'index-search',	
		components:{
			footItem
		},
		setup(){
			let data = reactive({
				searchInput:'',
				functionList:[
					{
						name:'果切',
						picUrl:'../../static/logo.jpg',
						path:'/page_fruit/fruit/fruit'
					},
					{
						name:'果子',
						picUrl:'../../static/logo.jpg',
						path:'/page_fruit/fruit/fruit'
					},
					{
						name:'通知',
						picUrl:'../../static/logo.jpg',
						path:'/page/notice/notice-part'
					},
					{
						name:'文创',
						picUrl:'../../static/logo.jpg',
						path:'/page_product/product/product'
					}
				],
				functionResult:[],
				notice:{
					total:0,
					isAll:false,
					page:1,
					noticeResult:[]
				}
				
			})
			
			onLoad((e)=>{
				if(e.type == 1) data.functionList = []
			})
			
			function searchThings(){
				if(data.searchInput.trim()==''){
					uni.showToast({
						icon:'error',
						title:'关键词不可为空',
						duration:700
					})
					return ;
				}
				const result = data.functionList.filter(item => item.name.includes(data.searchInput));
				data.functionResult = result;
				data.notice.total = 0;
				data.notice.isAll = false;
				data.notice.page = 1;
				uni.request({
					url:`${global.BASE_URL}/notice/search/catch/${data.searchInput}/1`,
					method:"GET",
					header:{
						"mytoken":uni.getStorageSync("localtoken")
					},
					success: (res) => {
						console.log(res)
						if(res.data.code){
							data.notice.noticeResult = res.data.data.list
							data.notice.total = res.data.data.size
							data.notice.page++;
							if(res.data.data.size == res.data.data.total) data.notice.isAll = true
						}
					},
					fail: (err) => {
						console.log(err)
					}
				})
			}
			
			function emptyInput(){
				data.searchInput = ''
			}
			
			function goPage(i){
				uni.navigateTo({
					url:data.functionResult[i].path
				})
			}
			
			function getMore(){
				uni.request({
					url:`${global.BASE_URL}/notice/search/catch/${data.searchInput}/${data.notice.page}`,
					method:"GET",
					header:{
						"mytoken":uni.getStorageSync("localtoken")
					},
					success: (res) => {
						console.log(res)
						if(res.data.code){
							data.notice.noticeResult = data.notice.noticeResult.concat(res.data.data.list)
							data.notice.total += res.data.data.size
							data.notice.page++;
							if(data.notice.total == res.data.data.total) data.notice.isAll = true
						}
					},
					fail: (err) => {
						console.log(err)
					}
				})
			}
			
			return {
				data,
				searchThings,
				emptyInput,
				goPage,
				getMore
			}
		}
	}
</script>

<style lang="scss" scoped>
	.index-search-input{
		width: 680rpx;
		height: 80rpx;
		border: 5rpx solid #9BCDD2;
		border-radius: 100rpx;
		padding: 0rpx 0rpx 0rpx 5rpx;
		margin: 10rpx 25rpx;
		display: flex;
		position: relative;
		
		& .index-search-image{
			width: 60rpx;
			height: 60rpx;
			margin: 10rpx 0;
		}
		
		& input{
			width: 420rpx;
			height: 80rpx;
			line-height: 80rpx;
			padding: 0rpx 10rpx;
		}
		
		& .index-empty-image{
			width: 40rpx;
			height: 40rpx;
			margin: 20rpx 0rpx;
		}
		
		& button{
			position: absolute;
			right: 0;
			width: 135rpx;
			height: 80rpx;
			line-height: 80rpx;
			background-color: #9BCDD2;
			color: white;
			border-radius: 0 200rpx 200rpx 0;
		}
	}
	
	.index-search-result-container{
		width: 750rpx;
		margin: 15rpx 0rpx;
		
		& .index-search-function-result-container{
			width: 680rpx;
			margin: 0rpx 35rpx;
			
			& .index-search-function-result-title{
				font-size: 40rpx;
				font-weight: bold;
				height: 60rpx;
				line-height: 60rpx;
			}
			
			& .index-search-function-result-item{
				display: flex;
				width: 630rpx;
				margin: 10rpx 15rpx;
				padding: 15rpx 0;
				border-bottom: 3rpx solid #cdcdcd;
				
				& image{
					width: 90rpx;
					height: 90rpx;
					border-radius: 180rpx;
					border: 2rpx solid black;
				}
				
				& .index-search-function-result-text{
					height: 90rpx;
					line-height: 90rpx;
					margin-left: 15rpx;
					font-weight: bold;
				}
			}
		}
		
		& .index-search-notice-result-container{
			width: 750rpx;
			margin-top: 40rpx;
			
			& .index-search-notice-result-title{
				margin-left: 35rpx;
				font-size: 40rpx;
				font-weight: bold;
				height: 60rpx;
				line-height: 60rpx;
			}
			
			& .index-search-notice-result-item{
				width:700rpx;
				margin-left: 15rpx;
			}
			
			& .index-search-notice-btn{
				width: 400rpx;
				height: 75rpx;
				line-height: 75rpx;
				font-size: 33rpx;
				margin: 20rpx 175rpx;
				color: white;
				background-color: #9BCDD2;
			}
			
			& .index-search-notice-bottom{
				width: 400rpx;
				height: 75rpx;
				line-height: 75rpx;
				text-align: center;
				font-size: 33rpx;
				margin: 20rpx 175rpx;
			}
		}
	}
</style>
